.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}


.header{
     display: flex;
     .px2rem(height, 90);
     height: 90px;
     align-items: center;
     background: linear-gradient(top,#f50000,#b40000);
     .left{
         .px2rem(padding-left, 20);
//       padding-left:10px ;
     }
     
     .center{
         flex: 1;
         .px2rem(font-size, 40);
//       font-size:40px;
         text-align: center; 
         color: white; 
     }
     
     .right{
         .px2rem(padding-right, 20);
//       padding-left:10px ;
     }
     
}


.section{
    display: flex;
    flex-direction: column;
//  font-size: 28px;
    .px2rem(font-size, 28);
    .img{
        text-align: center;
        margin: 0 auto;
//      padding: 20px;
        .px2rem(padding, 20);
    }
    
    .content{
        background: #f5f5f5;
//      border-radius: 20px;
        .px2rem(border-radius, 20);
        border: 1px solid darkgray;
        width: 90%;
        margin: 0 auto;
        .title{
//         height: 60px;
//         line-height: 60px;
//         font-size: 32px;
//         padding-left: 10px;
           
           .px2rem(height, 60);
           .px2rem(line-height, 60);
           .px2rem(font-size, 32);
           .px2rem(padding-left, 10);
           border-bottom: 1px solid gray;
        }
        
        .prices{
//          padding-left: 10px;
            .px2rem(padding-left, 10);
            font-weight: bold;
            border-bottom: 1px solid gray;
//          height: 60px;
//          line-height: 60px;
            .px2rem(height, 60);
            .px2rem(line-height, 60);
            .price{
                font-weight: bold;
                color: red;
            }
            
            .line{
                text-decoration: line-through;
                color: #8c8c8c;
            }
            
        }
        
        
        .color{
            border-bottom: 1px solid gray;
            display: flex;
            align-items: center;
            .left{
                flex: 1;
                text-align: left;
//              padding-left: 10px;
                .px2rem(padding-left, 10);
            }
            
            .center{
                flex: 1;
                text-align: right;
            }
            
            .right{
//              padding:20px ;
                .px2rem(padding, 20);
            }
        }
        
        .foot{
            display: flex;
            .text{
                flex: 1;
                .px2rem(padding-left, 10);
//              padding-left: 10px;
                
                .text-sub{
//                  height: 36px;
//                  line-height: 36px;
                    .px2rem(height, 36);
                    .px2rem(line-height, 36);
                }
                
            }
            .right{
//              padding: 20px;
                .px2rem(padding, 20);
            }
            
        }
        
        
        
    }
    
    
    .fot{
        display: flex;
        align-items: center;
        justify-content: center;
//      margin-top: 30px;
        .px2rem(margin-top, 30);
        .left{
           text-align: center;
//         width: 225px;
//         height: 60px;
//         line-height: 60px;
           .px2rem(width, 225);
           .px2rem(height, 60);
           .px2rem(line-height, 60);
           
           color: #686868; 
           background: linear-gradient(top, #ebeaea,#949494);
//         margin-right: 10px;
//         border-radius: 10px;
           .px2rem(margin-right, 10);
           .px2rem(border-radius, 10);
           
        }
        
        .right{
//          border-radius: 10px;
            .px2rem(border-radius,10);
            text-align: center;
//         width: 225px;
//         height: 60px;
//         line-height: 60px;
           .px2rem(width, 225);
           .px2rem(height, 60);
           .px2rem(line-height, 60);
           color: white; 
//         margin-left: 10px;
           .px2rem(margin-left, 10);
           background: linear-gradient(top, #e30101,#b20000);
        }
    }
    
}









.footer {
    position: fixed;
    width: 100%;
    .px2rem(bottom,0);
    .nav {
        margin: 0 auto;
        display: flex;
        background: black;
        li {
            flex: 1;
            display: flex;
            flex-direction: column;
            .px2rem(height,100);
            .px2rem(margin-top,5);
            .px2rem(margin-left,20);
            .px2rem(margin-right,20);
            .px2rem(margin-bottom,5);
            .px2rem(border-radius,5);
            align-items: center;
            .img {
                .px2rem(margin-top,5)
            }
            .title {
                text-align: center;
                color: white;
            }
            &.show {
                background: #6f6f6f;
            }
        }
    }
}
